<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		 <title>来源分析</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
		<%@ include file="/WEB-INF/jspf/statics.jspf" %>
		<style type="text/css">
			#container {
			    height: 700px; 
			    min-width: 310px; 
			    max-width: 800px; 
			    margin: 0 auto; 
			}
			.loading {
			    margin-top: 10em;
			    text-align: center;
			    color: gray;
			}
</style>
	</head>
	<body>
		<%@include file="/WEB-INF/pages/common/header.jsp" %>
		<%@include file="/WEB-INF/pages/common/menu.jsp" %>
		<div id="rightqqqq" style="border-left-style:groove ;float:left;width:88%;height:10px;margin-left:4px;min-height:80%;overflow-y:auto; overflow-x:hidden; ">
			<div style="margin:10px 0px;height:auto;">
				<div id="navContainer" class="navC mb10">  
			        <ul>  
			            <li><a name="now" onclick="chinaMap()" hidefocus="true">客源地分析</a></li>  
			            <li><a name="today" onclick="dispatchProvicesPie()" hidefocus="true">省源地分析</a></li> 
			            <li class="current"><a name="yestoday" onclick="triggerEvent('seven');" hidefocus="true">阶段分析</a></li>  
			        </ul>  
  				</div> 
			</div>
			<!-- 查询条件区 -->
			<div id="recendSearchCondition" style="height: 40px; line-height:40px; background-color:#ddeee5; margin-bottom:5px;width:99%;">
				<div style="float:left;">
					<input type="button" value="最近7天" id="nearSeven" onclick="triggerEvent('seven');" style="width:120px;" class="btn5"/>
					<input type="button" value="最近30天" id="nearThiry" onclick="triggerEvent('thirty');" style="width:120px;"class="btn5" />
				</div>
				<form id="searchForm" onsubmit="fnValidate('#startOrderTime','#endOrderTime');$('#dataTable').refreshData();return false;">
					起始时间：
					<input type="text" name="startTime" id="startTime" />
					结束时间：
					<input type="text" name="endTime" id="endTime" />
					<input type="button" value="统计" onclick="triggerEvent('custom');" class="btn5" style="width:80px;">
				</form>
			</div>
			<div class="containerStyle">
				<div style="width: 49.8% ;height: 400px; float:left;">
					<div id="container1" style="min-width: 250px; height: 400px; margin: 0 auto"></div>
				</div>
				<div style="width: 49.8% ;height: 400px;float:left;">
					<div id="container2" style="min-width: 250px; height: 400px; margin: 0 auto"></div>
				</div>
				<div style="width: 100% ;height: 400px; clear:both;">
					<div id="container3" style="min-width: 250px; height: 400px; margin: 0 auto"></div>
				</div>
			</div>
			<div class="testaa" style="width:99%;height:10px;"></div>
		</div>
	</body>
</html>
<script type="text/javascript" src="<%=basePath%>js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-1.10.3.datepicker_zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$().ready(function(){
	$('#navigation').accordion({
		header: '.head',
		navigation1: true, 
		event: 'click',
		fillSpace: true,
		active:1,
		animated: 'bounceslide'
	});
	$("a[class='actived']").removeAttr("class");
	$("#source").attr("class", "actived");
	$("#currentPosition").text("当前位置：统计报表> 来源分析 > 阶段分析");
});
$(function(){
	triggerEvent('seven');
	$("#startTime").datepicker().val();
	$("#endTime").datepicker().val();
})
function triggerEvent(value){
	statisticAge(value);
	chartPie(value);
	statisticNation(value);
}

function statisticNation(value){
	handleTime(value);
	var url="${ctx }/visitor/statistics/chart/eve_nation_visitor";
	var xtext1 = [];
    var color1 = ["gray","pink","red","blue","yellow","green","#fff"];
    $.ajax({
        type:'post',
        url:url,
        data:$("#searchForm").serializeArray(),
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        success:function(data){
           var json1 = eval("("+data+")");
           for(var i=0;i<json1.length;i++){
           		json1[i].y=json1[i].staCount;
                xtext1[i] = json1[i].staName;
 			}
            chart1.series[0].setData(json1);
        },
        error:function(e){
        } 
    });
    
    var chart1 = new Highcharts.Chart({
        chart:{
            renderTo:'container3',
            type:'column'
        },
        title:{
            text:'' 
        },
        xAxis:{
            categories:xtext1
        },
        yAxis:{
            title:{
                text:'人数' //Y轴的名称
            },
        }, 
        series:[{
            name:"民族"
        }]
    });
}

function statisticAge(value){
	handleTime(value);
	var url="";
    url="${ctx }/visitor/statistics/chart/stage_age";
	var chart = {
        chart:{
            renderTo:'container1',
            type:'bar' 
        },
        title:{
            text:'游客年龄分布图' 
        },
        xAxis:{
            categories: ['70岁及以上', '51-60岁', '41-50岁', '31-40岁', '21-30岁','11-20岁','10岁及以下','总参观人数']
        },
        yAxis:{
            title:{
                text:'人数' //Y轴的名称
            },
        }, 
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}'
                }
            }
        },
        tooltip: {
           // pointFormat: '<span>占比</span>: <b>{point.y:.2f}%</b><br/>'
        },
        series:[{
            name:"",
            data:[]
        },{
            name:"",
            data:[]
        },{
            name:"",
            data:[]
        }]
    };
  
    var color = ["gray","pink","red","blue","yellow","green","#fff"];
    $.ajax({
        type:'post',
        url:url,
        data:$("#searchForm").serializeArray(),
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        success:function(data){
            var json = eval("("+data+")");
           	chart.series=json;
            new Highcharts.Chart(chart);		
        },
        error:function(e){
        } 
    });
}


function chartPie(value){
	handleTime(value);
	var url="${ctx }/visitor/statistics/chart/eve_provice_visitor_pie";
    var data=[];
	 $.ajax({
        type:'post',
        url:url,
        data:$("#searchForm").serializeArray(),
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        async : false,//给全局变量赋值 
        success: function(result) {
        	var json1 = eval("("+result+")");
            $(json1).each(function(i,n){
                id = n['staProviceDisplay'];
                value = n['staCount'];
                data.push({name:id,y:value});
            }); 
            
        },
        error:function(e){
        } 
    });

	var chart = new Highcharts.Chart({
		chart: {
		 	renderTo:'container2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            margin: [0, 150, 160, 70],
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            name: "Brands",
            data:data
        }]
	});
}

function chinaMap(){
	window.location.href="${ctx }/visitor/statistics/chart/source_map";
}
function dispatchProvicesPie(){
	window.location.href="${ctx }/visitor/statistics/chart/eve_provice_visitor_pie";
}
</script>
 

